<template>
  <div>
    <el-dialog
      title="编辑楼层"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeEditDialog"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        :model="editInfo"
        :rules="rules"
        ref="refEditInfo"
        label-width="100px"
      >
        <el-form-item size="small" label="楼层名称" prop="name">
          <div style="display: flex; justify-content: space-between">
            <el-input
              clearable
              v-model="editInfo.name"
              maxlength="2"
              placeholder="请输入"
              oninput="{ value=value.replace(/[^\-\d]/g, '') } { value=value.replace(/\-{2,}/g, '-') } { value=value.replace(/(\d)\-/g, '$1') }
            { value=value.replace(/-(0+)/g, '0') } { value=value.replace(/^0+(\d)/, '$1') }
          {if(value<-3)value=-3} {if(value=='0')value=1} {if(value=='-0')value=-1} {if(value>50)value=50}"
            ></el-input>
            <span style="margin-left: 5px" class="ceng">层</span>
          </div>
        </el-form-item>
        <!-- <el-form-item size="small" label="">
          <el-button icon="el-icon-map-location" @click="openMap">地图选点</el-button>
        </el-form-item>
        <el-form-item size="small" label="地区" prop="provinceCityAreaValue">
          <v-distpicker :province="editInfo.province" :city="editInfo.city" :area="editInfo.area"
            @province="getProvince" @city="getCity" @area="getArea"></v-distpicker>
        </el-form-item> -->
        <!-- <el-form-item size="small" label="详细地址" prop="address">
          <el-input type="textarea" :rows="2" placeholder="请输入详细地址" v-model="editInfo.address"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="confirm-button"
          @click="editSubmit"
          v-preventReClick="1000"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="mapLoc" v-if="isShowMap">
      <!-- 嵌入的界面 -->
      <iframe
        :src="reqUrl"
        v-if="isShowMap"
        frameborder="0"
        class="iframe"
        seamless
        scrolling="no"
      ></iframe>
    </div>
  </div>
</template>

<script>
import { reqUpdateFloor } from "@/api/api";

export default {
  name: "editTeacherMemebr",
  props: ["getLocationInfo"],
  data() {
    // const validatorLocation = (rule, value, callback) => {
    //   if ((!this.editInfo.province || this.editInfo.province == '省') || (!this.editInfo.city || this.editInfo
    //       .city ==
    //       '市') || (!this.editInfo.area || this.editInfo.area == '区')) {
    //     callback(new Error('请选择省市区'))
    //   }
    // }
    return {
      dialogVisible: false,
      editInfo: {
        name: "",
        buildingType: "2",
      },
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: "请输入楼层名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        // provinceCityAreaValue: [{
        //   required: true,
        //   validator: validatorLocation,
        //   message: "请选择省市区",
        //   trigger: ["blur", "change"],
        // }]
      },
      reqUrl:
        "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&referer=精卫安管理系统&policy=1",
      isShowMap: false,
    };
  },
  watch: {
    getLocationInfo: {
      handler(val) {
        // console.log(val, "val")
        let a = val.name.indexOf("层");
        let l = val.name.substring(0, a);
        // console.log(l)

        this.editInfo.name = l;
        this.editInfo.lng = val.lng;
        this.editInfo.lat = val.lat;
        this.editInfo.address = val.address;
        this.editInfo.id = val.id;
        this.editInfo.isDefence = val.isDefence;
        // this.isShowMap = false
      },
      deep: true,
    },
  },
  methods: {
    openMap() {
      // 显示地图
      this.isShowMap = true;
    },
    // 新版省市区获取
    // getProvince(data) {
    //   this.editInfo.province = data.value;
    // },
    // getCity(data) {
    //   this.editInfo.city = data.value;
    // },
    // getArea(data) {
    //   this.editInfo.area = data.value;
    // },

    // 点击修改
    editSubmit() {
      this.$refs.refEditInfo.validate(async (valid) => {
        if (valid) {
          const res = await reqUpdateFloor({
            id: this.editInfo.id,
            name: this.editInfo.name + "层",
            picList: [],
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("编辑楼层成功");
          this.dialogVisible = false;
          this.$parent.SpaceManager();
        }
      });
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.$refs.refEditInfo.resetFields();
      // this.selectedProvinceCityArea = [];
      this.dialogVisible = false;
    },
  },
  deactivated() {
    if (this.$refs.refEditInfo != null) {
      this.closeEditDialog();
    }
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/common.less");

.mapLoc {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;

  .iframe {
    width: 100%;
    height: 100%;
  }
}
.ceng {
  color: @primaryThemeTxtColor2;
}
</style>
